<html>
  <head>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control " content="no-cache,must-revalidate" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"
    />
    <title>关林庙景区</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    
    <div class="container">
      <div class="content">
        <h1 id="title">加载中...</h1>
      </div>
    </div>
    <audio src="1.mp3" id="player" controls="controls">请使用微信扫描二维码</audio>
    <script>
      function init() {
        //定义文件位置
        const musicUrl = "//bms.wngamebox.cn/music/";
        const picUrl = "//bms.wngamebox.cn/pic/";
        //定义景点名称数组
        const config = [
          "Test",
          "景点概况",
          "戏楼",
          "大门",
          "仪门",
          "甬道",
          "钟鼓楼、焚箔炉",
          "龙首、凤尾柏",
          "拜殿",
          "大殿",
          "财神殿全景",
          "娘娘殿",
          "旋生柏、结义柏",
          "春秋殿",
          "关林",
          "奉敕碑亭",
          "石墓门",
        ];
        //读取URL参数
        let id = Number(location.search.split("=")[1]);
        if (!id || id + 1 > config.length) {
          console.log("Error ID");
          return;
        }
        //读取协议
        let protocol = window.location.protocol;
        if(protocol=="file:") protocol = "http:";
        //获取对应的景点名称
        let name = config[id];
        //写DOM
        document.getElementById("title").innerText = name;
        //拼接文件URL
        let music = protocol + musicUrl + id + ".mp3";
        let pic = protocol + picUrl + id + ".jpg";
        //更新CSS
        document.getElementsByClassName(
          "container"
        )[0].style.backgroundImage = `url(${pic})`;
        let css = `
        .content::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-filter: blur(20px);
            -moz-filter: blur(20px);
            -ms-filter: blur(20px);
            -o-filter: blur(20px);
            filter: blur(20px);
            z-index: -3;
            margin: -30px;
            background-image: url(${pic});
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;

            display: flex;
            align-items: center;
            justify-content: center;
          }
        `;
        let styleSheet = document.createElement("style");
        styleSheet.type = "text/css";
        styleSheet.innerText = css;
        document.head.appendChild(styleSheet);
        
        //更换播放源并开始播放
        let player = document.getElementById("player");
        player.setAttribute("src", music);
        player.play();
      }
      window.onload = init;
    </script>
  </body>
</html>
